<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>AI Chat Demo</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="bg-white shadow-xl rounded-2xl w-full max-w-2xl p-6">
    <h1 class="text-2xl font-bold text-center text-blue-600 mb-4">AI Chat 聊天界面</h1>

    <!-- 输入框 -->
    <div class="flex gap-2 mb-4">
        <input id="userInput"
               type="text"
               placeholder="请输入你的问题..."
               class="flex-grow border rounded-xl p-2 focus:outline-none focus:ring-2 focus:ring-blue-400">
        <button onclick="sendMessage()"
                class="bg-blue-500 text-white px-4 py-2 rounded-xl hover:bg-blue-600 transition">
            发送
        </button>
    </div>

    <!-- 聊天显示区域 -->
    <div id="chatBox" class="h-96 overflow-y-auto border rounded-xl p-3 bg-gray-50 space-y-3">
        <!-- 聊天内容会追加到这里 -->
    </div>
</div>

<script>
    async function sendMessage() {
      const input = document.getElementById("userInput");
      const chatBox = document.getElementById("chatBox");
      const message = input.value.trim();
      if (!message) return;

      // 显示用户消息
      const userMsg = document.createElement("div");
      userMsg.className = "text-right";
      userMsg.innerHTML = `<span class="inline-block bg-blue-500 text-white px-3 py-2 rounded-xl">${message}</span>`;
      chatBox.appendChild(userMsg);
      chatBox.scrollTop = chatBox.scrollHeight;

      input.value = "";

      try {
        // 调用后端接口
        const response = await fetch(`/multi/image?message=${encodeURIComponent(message)}`);
        const text = await response.text();

        // 显示 AI 回复
        const aiMsg = document.createElement("div");
        aiMsg.className = "text-left";
        aiMsg.innerHTML = `<span class="inline-block bg-gray-200 px-3 py-2 rounded-xl">${text}</span>`;
        chatBox.appendChild(aiMsg);
        chatBox.scrollTop = chatBox.scrollHeight;
      } catch (err) {
        alert("请求出错: " + err);
      }
    }

    // 回车键发送消息
    document.getElementById("userInput").addEventListener("keydown", e => {
      if (e.key === "Enter") sendMessage();
    });
  </script>
</body>
</html>
